<template>
    <div>
        <div class="box df flexy">
            <div class="shuru">
                <textarea rows="3" style="width: 1157px;
                    resize: none;
                    border: none;
                    padding: 0;
                    overflow: hidden; 
                    border-radius: 5px;
                    outline: none;
                    font-size:16px;">说点什么...
                </textarea>
            </div>
            <div class="caozuo df flexx aicenter">
                <!-- 添加表情 -->
                <div class="df flexx aicenter">
                    <a href="javascript:">
                        <img class="fl" src="imgall/face.png" alt="">
                        <a href="javascript:">添加表情</a>
                    </a>
                </div>
                <div>
                    <a class="fr btn ppl">评论</a>
                </div>
            </div>
            <div class="ping">
                <!-- 全部评论 -->
                <div>
                    <span>全部评论</span>
                    <span>5</span>
                </div>
            </div>
            <div class=" ">
                <div class="pinglunqu cb">
                    <!-- 用户1的评论展示清除浮动影响不然头像塌落 -->
                    <div class="userpl cb">
                        <!-- 用户1头像昵称评论内容时间戳回复赞 -->
                        <div class="touxiang fl us1"></div>
                        <div class="mianban fr">
                            <div>昵称</div>
                            <div style="overflow: hidden;margin-bottom: 25px;">评论展示板</div>
                            <!-- 时间戳这行草他妈的给老子居中 -->
                            <div class="juzhong cb">
                                <div class="fl">
                                    时间戳
                                </div>
                                <div class="fr zannum">
                                    <span class="dianzanshu">5</span>
                                </div>
                                <div class="fr" style="margin-right: 10px;">
                                    <a class="" href="javascript:">
                                        <img src="imgall/praiseblack.png" alt="">
                                    </a>
                                </div>
                                <div class="fr" style="margin-right: 30px;">
                                    <a class="" href="javascript:">
                                        <img src="imgall/newsblack.png" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>



                    <!-- 用户2的评论展示 -->
                    <div class="userpl cb">
                        <!-- 用户1头像昵称评论内容时间戳回复赞 -->
                        <div class="touxiang fl us2"></div>
                        <div class="mianban fr">
                            <div>昵称</div>
                            <div style="overflow: hidden;margin-bottom: 25px;">评论展示板</div>
                            <!-- 时间戳这行草他妈的给老子居中 -->
                            <div class="juzhong cb">
                                <div class="fl">
                                    时间戳
                                </div>
                                <div class="fr zannum">
                                    <span class="dianzanshu">5</span>
                                </div>
                                <div class="fr" style="margin-right: 10px;">
                                    <a class="" href="javascript:">
                                        <img src="imgall/praiseblack.png" alt="">
                                    </a>
                                </div>
                                <div class="fr" style="margin-right: 30px;">
                                    <a class="" href="javascript:">
                                        <img src="imgall/newsblack.png" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>




                </div>
            </div>
        </div>
    </div>
</template>
<style>
    /* 公共样式 */
    body,
    div {
        border: 0;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    a:hover {
        color: red;
        cursor: pointer;
    }

    a:active {
        color: royalblue;
    }

    ul,
    li {
        list-style: none;
    }

    body {
        background-color: #eeeeee;
    }

    /* 设为弹性盒子 */
    .df {
        /* Safari */
        display: -webkit-flex;
        display: flex;
    }

    /* 主轴为y 不换行flex-wrap: nowrap */
    .flexx {
        flex-direction: row;
    }

    /* 主轴为y 不换行flex-wrap: nowrap */
    .flexy {
        flex-direction: column;
    }

    /* 对称轴居中 */
    .aicenter {
        align-items: center;
    }


    /* a标签改成button */
    .btn {
        display: inline-block;
        width: 112px;
        height: 42px;
        padding-top: 10px;
        text-align: center;
        border-radius: 5px;
        /* 阻止a标签的文字被选中 */
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;

        background-color: rgba(0, 0, 0, 0.1);
    }
    /* 被鼠标悬停时 */
    .btn:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }
    /* 按钮被激活时 */
    .btn:active{
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* 左浮动 */
    .fl {
        float: left;
    }

    /* 右浮动 */
    .fr {
        float: right;
    }

    /* 样式 */
    .box {
        margin: auto;
        width: 1157px;
        background-color: #eeeeee;
        padding-top: 35px;
        /* 主轴上的对齐方式 起点对齐*/
        justify-content: stretch;
    }

    .shuru {
        width: 1157px;
        height: 54px;
        margin: auto;
    }

    .caozuo {
        background-color: rgba(red, green, blue, 0);
        justify-content: space-between;
    }

    /* 评论 */
    .ppl{
        line-height: 32px;
    }
    .caozuo>div {
        border: 1px solid rgba(0, 0, 0, 0);
        width: 50%;
        height: 95px;
        /* 操作上内边距 */
        padding-top: 20px;
        /* 下边距 */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
    }

    .biaoqing {
        display: inline-block;
        width: 42px;
        height: 42px;
    }

    /* 头像 */
    .touxiang{
        width: 60px;height: 60px;
        text-align: center;
        line-height: 55px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        overflow: hidden;
    }

    .mianban{
        width: 1057px;height: 150px;
    }
    .pinglunqu{
        margin-bottom: 50px;
    }
    /* 在之后插入一个空的div阻止浮动对他的影响 */
    .cb:after{
        /* 清除浮动 */
        clear: both;
        /* 内容为空 */
        content: "";
        /* 定义为块级元素 */
        display: block;
    }

    .cb:after{
        /* 清除浮动 */
        clear: both;
        /* 内容为空 */
        content: "";
        /* 定义为块级元素 */
        display: block;
    }



    .us1{
        background-image: url('./imgall/user1.jpg');
        background-repeat:no-repeat;
        background-size: 60px;
    }
    .us2{
        background-image: url('./imgall/user2.jpg');
        background-repeat:no-repeat;
        background-size: 60px;
    }
    .userpl{
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding-top: 30px;
    }
</style>